<template>
  <div class="com_wrap">
    <!-- 标题 -->
    <p class="title">{{ title }}( {{ comments.length }} )</p>
    <div class="comm_list" v-for="comment in c_comments" :key="comment.id">
      <!-- 用户头像 -->
      <div class="pic_img">
        <van-image round fit="cover" width="30" height="30" :src="comment.user.avatarUrl" />
      </div>
      <!-- 评论信息 -->
      <div class="comm_info">
        <div class="user_info">
          <div class="left">
            <!-- 名字 -->
            <div class="name">{{ comment.user.nickname }}</div>
            <!-- 时间 -->
            <div class="time">{{ comment.time | dateFormat }}</div>
          </div>
          <!-- 喜欢人数 -->
          <div class="right">
            {{ comment.likedCount }}
            <i class="iconfont icon-dianzan"></i>
          </div>
        </div>
        <!-- 评论内容或回复内容 -->
        <div v-if="!comment.beReplied.length" class="content">{{ comment.content }}</div>
        <div v-else class="reply" v-for="(reply, idx) in comment.beReplied" :key="idx">
          回复
          <span>@{{ reply.user.nickname }}</span>
          : {{ comment.content }}
          <p>
            @{{ reply.user.nickname }}:
            {{ reply.content }}
          </p>
        </div>
      </div>
    </div>
    <!-- 查看更多评论 -->
    <div v-if="show_check" @click="check_all" class="check_all">
      查看全部{{ comments.length }}条评论
      <i class="iconfont icon-jiantou"></i>
    </div>
  </div>
</template>

<script>
import date from "@/util/date";
export default {
  props: ["comments", "title"],
  data() {
    return {
      // 显示评论数量
      num: 10,
    };
  },
  computed: {
    // 评论切割
    c_comments() {
      return this.comments.slice(0, this.num);
    },
    // 是否显示查看更多
    show_check() {
      return this.num !== this.comments.length;
    },
  },
  methods: {
    // 显示更多评论
    check_all() {
      this.num = this.comments.length;
    },
  },
  filters: {
    // 格式化评论时间
    dateFormat(val) {
      return date.convertDate(val);
    },
  },
};
</script>

<style lang="scss" scoped>
.com_wrap {
  .title {
    background-color: #eeeff0;
    color: #666;
    padding: 0 10px;
    line-height: 24px;
    font-size: 12px;
  }
  .comm_list {
    padding-top: 15px;
    display: flex;
    justify-content: space-between;
    .pic_img {
      flex-shrink: 0;
      margin: 0 10px;
    }
    .comm_info {
      flex: 1;
      border-bottom: 1px solid #eee;
      padding-right: 10px;
      .user_info {
        display: flex;
        justify-content: space-between;
        .left {
          .name {
            font-size: 14px;
            color: #666;
          }
          .time {
            margin-top: 5px;
            font-size: 9px;
            color: #999;
          }
        }
        .right {
          width: 50px;
          flex-shrink: 0;
          text-align: right;
          font-size: 11px;
          color: #999;
          i {
            font-size: 14px;
          }
        }
      }
      .content {
        margin: 12px 0;
        text-align: justify;
        color: #333;
        font-size: 15px;
      }
      .reply {
        margin: 12px 0;
        text-align: justify;
        color: #333;
        font-size: 15px;
        span {
          color: #507daf;
        }
        p {
          font-size: 14px;
          color: #888;
          padding: 10px;
          margin-top: 8px;
          border: 1px solid #eee;
        }
      }
    }
  }
  .check_all {
    text-align: center;
    color: #999;
    font-size: 14px;
    padding: 20px 0;
    i {
      font-size: 14px;
    }
  }
}
</style>
